<template>
    <div class="svgWrapper noselect" ref="svgclip">
        <svg version="1.1"
             id="图层_1"
             xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
             x="0px" y="0px"
             viewBox="-350 90 2955 1495"
             xml:space="preserve"
             @click="handleSw"
             ref="svg"
        >
            <g>
                <path d="M2262,1v1643H-4V1H2262 M2263,0H-5v1645h2268V0L2263,0z"/>
            </g>
            <ellipse class="st0" cx="825.7" cy="928.6" rx="43.5" ry="30.2"/>
            <line class="st1" x1="179.4" y1="353.9" x2="179.4" y2="410.6"/>
            <line class="st1" x1="73.3" y1="1432.9" x2="73.3" y2="1489.6"/>
            <line class="st1" x1="748.4" y1="1438.7" x2="748.4" y2="1495.4"/>
            <line class="st1" x1="1161" y1="1435.7" x2="1161" y2="1492.4"/>
            <line class="st1" x1="2140.7" y1="1440.2" x2="2140.7" y2="1496.9"/>
            <line class="st1" x1="1155.3" y1="898.1" x2="1155.3" y2="954.8"/>
            <line class="st1" x1="2139.5" y1="899.6" x2="2139.5" y2="956.3"/>
            <line class="st1" x1="2135.3" y1="360.6" x2="2135.3" y2="417.3"/>
            <line class="st1" x1="824.1" y1="899.8" x2="824.1" y2="956.5"/>
            <line class="st1" x1="460.6" y1="1181.9" x2="506.6" y2="1214.6"/>
            <line class="st1" x1="1164.6" y1="362.5" x2="1164.6" y2="419.2"/>
            <line id="X06I_x5F_" class="st2" x1="2137.2" y1="389.5" x2="2226.2" y2="389.6"/>
            <line id="X26I_x5F_X06I" class="st2" x1="1167.6" y1="388.5" x2="2137.2" y2="389.5"/>
            <line id="SW06I_x5F_X26I_1_" class="st2" x1="596.7" y1="388.1" x2="1167.8" y2="388.6"/>
            <polyline id="X20I_x5F_SW06I_1_" class="st2" points="179,387.5 505.8,387.9 535.3,387.9 548.4,387.9 "/>
            <line id="_x5F_X20I" class="st2" x1="12.5" y1="387.4" x2="179" y2="387.5"/>
            <line id="SW06I_x5F_SW08I_1_" class="st2" x1="586.6" y1="408.6" x2="1002.1" y2="904.1"/>
            <line id="SW06I_x5F_zhe" v-show="SW[0].value" class="st2" x1="548.1" y1="388.1" x2="596.7" y2="388.1"/>
            <g id="SW06I_x5F_fan" v-show="SW[1].value">
	            <line id="X20I_x5F_SW06I_2_" class="st2" x1="548.4" y1="387.9" x2="575.1" y2="387.9"/>
                <line id="SW06I_x5F_SW08I" class="st2" x1="567.6" y1="384.3" x2="586.6" y2="408.6"/>
            </g>
            <line id="SW04I_x5F_SW02I_1_" class="st2" x1="675.6" y1="952.8" x2="285.4" y2="1447"/>
            <line id="X07I_x5F_" class="st2" x1="2140.8" y1="931.4" x2="2225.5" y2="931.7"/>
            <line id="X24I_x5F_X07I" class="st2" x1="1155.8" y1="928.4" x2="2140.8" y2="931.4"/>
            <line id="SW08I_x5F_X24I_1_" class="st2" x1="1038.5" y1="928.4" x2="1157.3" y2="928.4"/>
            <g id="SW08I_x5F_fan" v-show="SW[3].value">
	            <line id="SW06I_x5F_SW08I_2_" class="st2" x1="1002.1" y1="904.1" x2="1025.2" y2="931.7"/>
                <line id="SW08I_x5F_X24I" class="st2" x1="1017.7" y1="928.4" x2="1038.5" y2="928.4"/>
            </g>
            <line id="SW08I_x5F_zhe" v-show="SW[2].value" class="st2" x1="980.7" y1="929" x2="1040.2" y2="929"/>
            <line id="SW04I_x5F_SW08I_2_" class="st2" x1="709.4" y1="929.4" x2="983.2" y2="929.1"/>
            <g id="SW04I_x5F_fan" v-show="SW[5].value">
	            <line id="SW04I_x5F_SW02I" class="st2" x1="694" y1="927.1" x2="676.2" y2="952.9"/>
                <line id="SW04I_x5F_SW08I_1_" class="st2" x1="687.5" y1="930.2" x2="711.7" y2="930.1"/>
            </g>
            <line id="SW04I_x5F_zhe" v-show="SW[4].value" class="st2" x1="654.6" y1="929.9" x2="712" y2="929.9"/>
            <line id="_x5F_SW04I" class="st2" x1="300.6" y1="928.6" x2="659.1" y2="928.6"/>
            <line id="X09I_x5F_" class="st2" x1="2140.8" y1="1467" x2="2228.5" y2="1466.9"/>
            <line id="X22I_x5F_X09I" class="st2" x1="1162.2" y1="1467.6" x2="2140.8" y2="1467"/>
            <line id="_x7C__x5F_X22I" class="st2" x1="748.9" y1="1467.9" x2="1162.2" y2="1467.6"/>
            <line id="SW02I_x5F__x7C_" class="st2" x1="296.5" y1="1468.4" x2="748.9" y2="1467.9"/>
            <line id="SW02I_x5F_zhe" v-show="SW[6].value" class="st2" x1="243.6" y1="1468.4" x2="296.5" y2="1468.4"/>
            <g id="SW02I_x5F_fan" v-show="SW[7].value">
	            <line id="SW04I_x5F_SW02I_2_" class="st2" x1="285.4" y1="1447" x2="266.1" y2="1471.4"/>
                <line id="SW02I_x5F_X221_x28_B_x29__1_" class="st2" x1="242.9" y1="1468.4" x2="273.6" y2="1468.4"/>
            </g>
            <line id="X18I_x5F_SW02I" class="st2" x1="73.5" y1="1468.4" x2="242.9" y2="1468.4"/>
            <line id="_x5F_X18I" class="st2" x1="12.5" y1="1468.4" x2="73.5" y2="1468.4"/>
            <!--单锁圈-->
            <ellipse id="SW06I" v-show="SwLock[0]" class="st3" cx="577.4" cy="388.9" rx="26.3" ry="25.7"/>
            <ellipse id="SW08I" v-show="SwLock[1]" class="st3" cx="1013.2" cy="926.4" rx="26.3" ry="25.7"/>
            <ellipse id="SW04I" v-show="SwLock[2]" class="st3" cx="683.2" cy="929.4" rx="26.3" ry="25.7"/>
            <ellipse id="SW02I" v-show="SwLock[3]" class="st3" cx="269.1" cy="1466.2" rx="26.3" ry="25.7"/>
            <g id="X26I_x5F_g">
	            <line id="X26I_x5F_xian" class="st1" x1="1164" y1="314" x2="1164" y2="353.7"/>
                <text transform="matrix(1.2314 0 0 1 1060.5801 280.1177)" class="st6">X26I</text>
                <ellipse id="X26I_x28_A_x29_"  class="st7" cx="1131.9" cy="334.2" rx="22.5" ry="22.7"/>
                <ellipse id="X26I_x28_B_x29_" v-show="light[1]" class="st72" cx="1084.2" cy="333.9" rx="22.5" ry="22.7"/>
            </g>
            <g id="X24I_x5F_g">
	            <text transform="matrix(1.2314 0 0 1 1069.2539 841.2539)" class="st6">X24I</text>
                <line id="X24I_x5F_xian" class="st8" x1="1156.8" y1="852" x2="1156.8" y2="891.7"/>
                <ellipse id="X24I_x28_B_x29_"  v-show="light[3]" class="st72" cx="1077.2" cy="871.2" rx="22.5" ry="22.7"/>
                <ellipse id="X24I_x28_A_x29_" class="st7" cx="1126.2" cy="870.7" rx="22.5" ry="22.7"/>
            </g>
            <g id="X22I_x5F_g">
	            <line id="X22I_x5F_xian" class="st8" x1="1161.1" y1="1391.8" x2="1161.1" y2="1431.5"/>
                <text transform="matrix(1.2314 0 0 1 1057.3359 1369.4453)" class="st6">X22I</text>
                <ellipse id="X22I_x28_B_x29_" v-show="light[6]" class="st72" cx="1081.2" cy="1410.1" rx="22.5" ry="22.7"/>
                <ellipse id="X22I_x28_A_x29_" class="st7" cx="1129" cy="1410.5" rx="22.5" ry="22.7"/>
            </g>
            <g id="X20I_x5F_g">
	            <text transform="matrix(1.2314 0 0 1 163.6221 514.7837)" class="st6">X20I</text>
                <line id="X20I_x5F_xian" class="st9" x1="180.6" y1="457.4" x2="181" y2="417.7"/>
                <ellipse id="X20I_x28_B_x29_" v-show="light[0]" class="st72" cx="261.8" cy="439.8" rx="22.5" ry="22.7"/>
                <ellipse id="X20I_x28_A_x29_" class="st7" cx="211.4" cy="439.2" rx="22.5" ry="22.7"/>
            </g>
            <g id="X18I_x5F_g">
	            <text transform="matrix(1.2314 0 0 1 70.1201 1581.1221)" class="st6">X18I</text>
                <line id="X18I_x5F_xian" class="st1" x1="75" y1="1539" x2="75" y2="1499.2"/>
                <ellipse id="X18I_x28_B_x29_" v-show="light[5]" class="st72" cx="153.9" cy="1520.4" rx="22.5" ry="22.7"/>
                <ellipse id="X18I_x28_A_x29_" class="st7" cx="104.6" cy="1520.8" rx="22.5" ry="22.7"/>
            </g>
            <g id="X06I_x5F_g">
	            <text transform="matrix(1.2314 0 0 1 2113.1992 518.4956)" class="st6">X06I</text>
                <line id="X06I_x5F_xian" class="st1" x1="2135.3" y1="461.7" x2="2135.3" y2="422"/>
                <ellipse id="X06I_x28_B_x29_" v-show="light[2]" class="st72" cx="2213.6" cy="442.9" rx="22.5" ry="22.7"/>
                <ellipse id="X06I_x28_A_x29_" class="st10" cx="2165.9" cy="441.5" rx="22.5" ry="22.7"/>
            </g>
            <g id="X07I_x5F_g">
                <text transform="matrix(1.2314 0 0 1 2125.7432 1048.8115)" class="st6">X07I</text>
                <line id="X071I_x5F_xian" class="st11" x1="2139.8" y1="1001.4" x2="2139.8" y2="961.7"/>
                <ellipse id="X071I_x28_B_x29_" v-show="light[4]" class="st72" cx="2218.4" cy="981.9" rx="22.5" ry="22.7"/>
                <ellipse id="X071I_x28_A_x29_" class="st10" cx="2171.9" cy="982.8" rx="22.5" ry="22.7"/>
            </g>
            <g id="X09I_x5F_g">
	            <text transform="matrix(1.2314 0 0 1 2130.7451 1594.1699)" class="st6">X09I</text>
                <line id="X09I_x5F_xian" class="st11" x1="2139.8" y1="1545.9" x2="2139.8" y2="1506.2"/>
                <ellipse id="X09I_x28_B_x29_" v-show="light[7]" class="st72" cx="2221" cy="1527.9" rx="22.5" ry="22.7"/>
                <ellipse id="X09I_x28_A_x29_" class="st10" cx="2173.4" cy="1528.7" rx="22.5" ry="22.7"/>
            </g>
            <polyline class="st12" points="239.1,868.2 297.6,868.2 297.6,986.1 239.1,986.1 "/>
            <text transform="matrix(1.2314 0 0 1 795.355 354.9448)" class="st6">G13I</text>
            <text transform="matrix(1.2314 0 0 1 1579.0381 357.7759)" class="st6">G15I</text>
            <text transform="matrix(1.2314 0 0 1 1557.917 978.875)" class="st6">G66I</text>
            <text transform="matrix(1.2314 0 0 1 1553.4385 1534.25)" class="st6">G18I</text>
            <text transform="matrix(1.2314 0 0 1 901.3052 1537.2754)" class="st6">G16I</text>
            <text transform="matrix(0.831 0 0 1 521.4961 358.1978)" class="st13 st5 st14">SW06I</text>
            <text transform="matrix(0.831 0 0 1 615.3325 896.7256)" class="st13 st5 st14">SW04I</text>
            <text transform="matrix(0.831 0 0 1 969.2192 998.5752)" class="st13 st5 st14">SW08I</text>
            <text transform="matrix(0.831 0 0 1 207.21 1525.125)" class="st13 st5 st14">SW02I</text>
            <rect x="1217.3" y="481.1" class="st15" width="835.7" height="334.1"/>
            <rect x="1220.3" y="1022.4" class="st15" width="835.7" height="334.1"/>
            <g id="H24I_x28_A_x29_">
	<text transform="matrix(0.9923 0 0 1 1249.0293 609.4282)" class="st16 st5 st17">扣车</text>
                <ellipse class="st18" cx="1282.5" cy="539.3" rx="26.3" ry="26.5"/>
                <text transform="matrix(1 0 0 1 1268.0635 548.5957)" class="st5 st19">H</text>
</g>
            <g id="H24I_x28_A_x29__1_">
	<g id="park_x5F_2">
		<ellipse class="st18" cx="1983.2" cy="531.8" rx="26.3" ry="26.5"/>
        <text transform="matrix(0.9923 0 0 1 1949.6875 601.8677)" class="st16 st5 st17">扣车</text>
	</g>
                <text transform="matrix(1 0 0 1 1969.9785 541.6763)" class="st5 st19">H</text>
</g>
            <g id="H24I_x28_C_x29_">
	<g id="park_x5F_2_1_">
		<ellipse class="st18" cx="1284" cy="1081.2" rx="26.3" ry="26.5"/>
        <text transform="matrix(0.9923 0 0 1 1250.5056 1151.327)" class="st16 st5 st17">扣车</text>
	</g>
                <text transform="matrix(1 0 0 1 1270.7966 1091.1356)" class="st5 st19">H</text>
</g>
            <g id="H24I_x28_F_x29_">
	<g id="park_x5F_2_2_">
		<ellipse class="st18" cx="1993" cy="1258.2" rx="26.3" ry="26.5"/>
        <text transform="matrix(0.9923 0 0 1 1959.5052 1328.3269)" class="st16 st5 st17">扣车</text>
	</g>
                <text transform="matrix(1 0 0 1 1979.7964 1268.1355)" class="st5 st19">H</text>
</g>
            <g id="H24I_x28_E_x29_">
	<g id="park_x5F_2_3_">
		<ellipse class="st18" cx="1284" cy="1263.2" rx="26.3" ry="26.5"/>
        <text transform="matrix(0.9923 0 0 1 1250.5052 1333.3269)" class="st16 st5 st17">扣车</text>
	</g>
                <text transform="matrix(1 0 0 1 1270.7964 1273.1355)" class="st5 st19">H</text>
</g>
            <g id="H24I_x28_D_x29_">
	<g id="park_x5F_2_4_">
		<ellipse class="st18" cx="1990" cy="1075.2" rx="26.3" ry="26.5"/>
        <text transform="matrix(0.9923 0 0 1 1956.5052 1145.3269)" class="st16 st5 st17">扣车</text>
	</g>
                <text transform="matrix(1 0 0 1 1976.7964 1085.1355)" class="st5 st19">H</text>
</g>
</svg>
    </div>

</template>

<script setup>
import {getCurrentInstance, onBeforeUnmount, onMounted, reactive, ref} from 'vue'
import bus from "vue3-eventbus";
import {useZoom} from "../hooks/useZoom";
//进路排列逻辑
let sheet = reactive([
    {name:'X20I_x28_A_x29_X26I_x28_A_x29_',value:['X20I_x5F_SW06I_1_','SW06I_x5F_zhe','SW06I_x5F_X26I_1_']},
    {name:'X20I_x28_A_x29_X24I_x28_A_x29_',value:['X20I_x5F_SW06I_1_','X20I_x5F_SW06I_2_','SW06I_x5F_SW08I','SW06I_x5F_SW08I_1_','SW06I_x5F_SW08I_2_','SW08I_x5F_X24I','SW08I_x5F_X24I_1_']},
])
//道岔的定反位
//SW06I SW08I为双动道岔:处于的状态一致。
let SW = reactive([
    {name:'SW06I_x5F_zhe',value:false},{name:'SW06I_x5F_fan',value: true},
    {name:'SW08I_x5F_zhe',value:false},{name:'SW08I_x5F_fan',value: true},
    {name:'SW04I_x5F_zhe',value:false},{name:'SW04I_x5F_fan',value: true},
    {name:'SW02I_x5F_zhe',value:false},{name:'SW02I_x5F_fan',value: true},
])
//引导信号的开放
let light = reactive([false,false,false,false,false,false,false,false])
//道岔是否单锁
let SwLock = reactive([false,false,false,false])
//联锁逻辑
let route = ref('')
let i = 0
let name = ''
function handleSw(e){
    //防止错误点击
    if(e.target.id === 'X20I_x28_A_x29_' || e.target.id === 'X24I_x28_A_x29_' || e.target.id==='X26I_x28_A_x29_'){
        if(name !==e.target.id){
            name += e.target.id
            i++
            if(i===2){
                /**
                 * SW06I单锁，但SW08I未锁
                 * 1.如果锁在定位X20I->X24I的进路无法排列，但是X20I->X26I的进路可以排列
                 * 2.如果锁在反位X20I->X26I的进路无法排列，但是X20I->X24I的径路可以排列
                 * SW08I单锁，但SW06I未锁
                 * 1.如果锁在定位X20I->X24I的进路无法排列，但是X20I->X26I的进路可以排列
                 * 2.如果锁在反位X20I->X26I的进路无法排列，但是X20I->X24I的径路可以排列
                 * SW06I和SW08I由于是双动道岔，所以一个锁住另外一个就无法操动
                 * **/
                if(SwLock[0]===true && SwLock[1]===false && SW[0].value === true && SW[1].value === false && SW[2].value === true &&  SW[3].value === false){
                    // ElMessage({
                    //     showClose: true,
                    //     message: 'SW06I单锁至定位',
                    //     type: 'warning',
                    // });
                    if(name === 'X20I_x28_A_x29_X26I_x28_A_x29_'){
                        setTimeout(()=>{
                            sheet[0].value.forEach(item=>{
                                document.getElementById(item).style.stroke='#86f7b8'
                            })
                        },1000)
                    }
                }else if(SwLock[1]===true && SwLock[0]===false && SW[0].value === false && SW[1].value === true && SW[2].value === false &&  SW[3].value === true){
                    // ElMessage({
                    //     showClose: true,
                    //     message: 'SW08I单锁至反位',
                    //     type: 'warning',
                    // });
                    if(name === 'X20I_x28_A_x29_X24I_x28_A_x29_'){
                        setTimeout(()=>{
                            sheet[1].value.forEach(item=>{
                                document.getElementById(item).style.stroke='#86f7b8'
                            })
                        },1000)
                    }
                }else if(SwLock[0]===true && SwLock[1]===false && SW[0].value === false && SW[1].value === true && SW[2].value === false &&  SW[3].value === true){
                    // ElMessage({
                    //     showClose: true,
                    //     message: 'SW06I单锁至反位',
                    //     type: 'warning',
                    // });
                    if(name === 'X20I_x28_A_x29_X24I_x28_A_x29_'){
                        setTimeout(()=>{
                            sheet[1].value.forEach(item=>{
                                document.getElementById(item).style.stroke='#86f7b8'
                            })
                        },1000)
                    }
                }else if (SwLock[1]===true && SwLock[0]===false && SW[0].value === true && SW[1].value === false && SW[2].value === true &&  SW[3].value === false){
                    // ElMessage({
                    //     showClose: true,
                    //     message: 'SW08I单锁至定位',
                    //     type: 'warning',
                    // });
                    if(name === 'X20I_x28_A_x29_X26I_x28_A_x29_'){
                        setTimeout(()=>{
                            sheet[0].value.forEach(item=>{
                                document.getElementById(item).style.stroke='#86f7b8'
                            })
                        },1000)
                    }
                }else if(SwLock[0]===true && SwLock[1]===true && SW[0].value === true && SW[1].value === false && SW[2].value === true &&  SW[3].value === false){
                    // ElMessage({
                    //     showClose: true,
                    //     message: 'SW06I单锁 && SW08I单锁 && 只能排列X20I->X26I',
                    //     type: 'warning',
                    // });
                    //延迟设置
                    if(name === 'X20I_x28_A_x29_X26I_x28_A_x29_'){
                        setTimeout(()=>{
                            sheet[0].value.forEach(item=>{
                                document.getElementById(item).style.stroke='#86f7b8'
                            })
                        },1000)
                    }
                }else if(SwLock[0]===true && SwLock[1]===true && SW[0].value === false && SW[1].value === true && SW[2].value === false &&  SW[3].value === true){
                    // ElMessage({
                    //     showClose: true,
                    //     message: 'SW06I单锁 && SW08I单锁 && 只能排列X20I->X24I',
                    //     type: 'warning',
                    // });
                    //延迟设置
                    if(name === 'X20I_x28_A_x29_X24I_x28_A_x29_'){
                        setTimeout(()=>{
                            sheet[1].value.forEach(item=>{
                                document.getElementById(item).style.stroke='#86f7b8'
                            })
                        },1000)
                    }
                } else{
                    sheet.forEach((item)=>{
                        if(item.name===name && name === 'X20I_x28_A_x29_X26I_x28_A_x29_'){
                            item.value.forEach((itemInItem)=>{
                                if(itemInItem==='SW06I_x5F_zhe'){
                                    SW[0].value = true
                                    SW[1].value = false
                                    SW[2].value = true
                                    SW[3].value = false
                                }
                                sheet[1].value.forEach(itemk=>{
                                    document.getElementById(itemk).style.stroke='#d4d4d4'
                                })
                                //延迟设置
                                setTimeout(()=>{
                                    document.getElementById(itemInItem).style.stroke='#86f7b8'
                                },1000)
                            })
                        }else if(item.name===name && name === 'X20I_x28_A_x29_X24I_x28_A_x29_'){
                            item.value.forEach((itemInItem)=>{
                                if(itemInItem==='X20I_x5F_SW06I_2_'){
                                    SW[0].value = false
                                    SW[1].value = true
                                    SW[2].value = false
                                    SW[3].value = true
                                }
                                sheet[0].value.forEach(itemk=>{
                                    document.getElementById(itemk).style.stroke='#d4d4d4'
                                })
                                //延迟设置
                                setTimeout(()=>{ document.getElementById(itemInItem).style.stroke='#86f7b8'},1000)
                            })
                        }
                    })
                }
                i=0
                name='';
            }
        }else{
            i=0
            name='';
            alert('重复点击始|终端，重新选择！')
        }
    }
}
//单锁|单解
bus.on('DSandDJ',(e)=>{
    let data = Array.from(e)
    if(data.indexOf('SW06I')!==-1){
        SwLock[0]=true
    }else{
        SwLock[0]=false
    }
    if(data.indexOf('SW08I')!==-1){
        SwLock[1]=true
    }else{
        SwLock[1]=false
    }
    if(data.indexOf('SW04I')!==-1){
        SwLock[2]=true
    }else{
        SwLock[2]=false
    }
    if(data.indexOf('SW02I')!==-1){
        SwLock[3]=true
    }else{
        SwLock[3]=false
    }
})
//取消进路
bus.on('canclerouter',(e)=>{
    if(e===false){
        let Doc_Array = document.querySelectorAll(".st2");
        let i;
        for (i = 0; i < Doc_Array.length; i++) {
            Doc_Array[i].style.stroke = '#d4d4d4';
        }
    }
})
//定操
bus.on('DC',(e)=>{
    let ele = document.getElementById('X20I_x5F_SW06I_1_')
    let eleColor = getComputedStyle(ele,null).stroke;
    if(e === true && SwLock[0]===false && SwLock[1]===false && eleColor!=='rgb(134, 247, 184)'){
        SW[0].value = true
        SW[1].value = false
        SW[2].value = true
        SW[3].value = false
    }else{
        alert('由于联锁条件无法操动')
    }
})
//反操
bus.on('FC',(e)=>{
    let ele = document.getElementById('X20I_x5F_SW06I_1_')
    let eleColor = getComputedStyle(ele,null).stroke;
    if(e === false && SwLock[0]===false && SwLock[1]===false && eleColor!=='rgb(134, 247, 184)'){
        SW[0].value = false
        SW[1].value = true
        SW[2].value = false
        SW[3].value = true
    }else{
        alert('由于联锁条件无法操动')
    }
})
//YX
bus.on('YX',(e)=>{
   let data = Array.from(e)
    if(data.indexOf('X20I')!==-1){
        light[0] = true
    }else{
        light[0] = false
    }
    if(data.indexOf('X26I')!==-1){
        light[1] = true
    }else{
        light[1] = false
    }
    if(data.indexOf('X24I')!==-1){
        light[3] = true
    }else{
        light[3] = false
    }

})

let {svgclip,svg,initZoom} = useZoom();
initZoom( 400,0.750);

onBeforeUnmount(() => {
    bus.off('FC');
    bus.off('DC');
    bus.off('canclerouter');
    bus.off('DSandDJ');
})
</script>

<style scoped lang="scss">
.svgWrapper {
    height: 100%;
    width: 100%;
    overflow: auto;
    cursor: default;
    //svg{
    //    height:95%;
    //    width: 100%;
    //}
}

.st0 {
    fill: none;
    stroke: #F90000;
    stroke-width: 8;
    stroke-miterlimit: 10;
}

.st1 {
    fill: none;
    stroke: #FFFFFF;
    stroke-width: 5;
    stroke-miterlimit: 10;
}

.st2 {
    fill: #d4d4d4;
    stroke: #d4d4d4;
    stroke-width: 16;
    stroke-miterlimit: 10;
}

.st3 {
    fill: none;
    stroke: #47FF00;
    stroke-width: 5;
    stroke-miterlimit: 10;
}



.st6 {
    font-size: 35px;
    fill: #ffffff;
}

.st7 {
    fill: #FF0000;
}

.st8 {
    fill: #FF0000;
    stroke: #FFFFFF;
    stroke-width: 5;
    stroke-miterlimit: 10;
}

.st9 {
    fill: #FFFF00;
    stroke: #FFFFFF;
    stroke-width: 5;
    stroke-miterlimit: 10;
}

.st10 {
    fill: #F90303;
}

.st11 {
    fill: #F90303;
    stroke: #FFFFFF;
    stroke-width: 5;
    stroke-miterlimit: 10;
}

.st12 {
    fill: none;
    stroke: #9CFDFE;
    stroke-width: 8;
    stroke-miterlimit: 10;
}

.st13 {
    fill: #8DEB9F;
    stroke: #8DEB9F;
    stroke-miterlimit: 10;
}

.st14 {
    font-size: 51.0488px;
}

.st15 {
    fill: none;
    stroke: #FFFFFF;
    stroke-width: 10;
    stroke-miterlimit: 10;
}

.st16 {
    fill: #FFFFFF;
}

.st17 {
    font-size: 36.2873px;
}

.st18 {
    fill: #d4d4d4;
}

.st19 {
    font-size: 35px;
    fill: #ffffff;
}

ellipse:hover{
    stroke: #ffffff;
    stroke-width:5;
}
.st72{
    fill: #ffdd00;
}
</style>
